﻿@using Smartstore.Web.Models.Media;

@model MediaGalleryModel

@{
    var defaultFile = Model.Files?.ElementAtOrDefault(Model.GalleryStartIndex);
}

<script src="~/bundle/js/smart-gallery.js" sm-target-zone="scripts"></script>

<div class="gal-box">
    <!-- Thumbnail navigation -->
    <div class="gal-nav-cell@(Model.Files.Count <= 1 ? " gal-nav-hidden" : "")">
        <div class="gal-nav">
            <div class="gal-list">
                <div class="gal-track" itemscope itemtype="http://schema.org/ImageGallery">
                    @for (int i = 0; i < Model.Files.Count; i++)
                    {
                        var file = Model.Files[i];
                        var linkTitle = T("Product.ThumbTitle", Model.ModelName, (i + 1).ToString());
                        var picTitle = linkTitle;
                        var picAlt = T("Product.ThumbAlternateText", Model.ModelName, (i + 1).ToString());
                        var isVideo = file.MediaType == MediaType.Video;

                        if (file.Alt != null && file.Alt != Model.ModelName)
                        {
                            picAlt = file.Alt;
                        }

                        if (file.TitleAttribute != null && file.TitleAttribute != Model.ModelName)
                        {
                            picTitle = file.TitleAttribute;
                        }

                        <div class="gal-item" itemprop="associatedMedia" itemscope itemtype="http://schema.org/@(isVideo ? "Video" : "Image")Object">
                            <a class="gal-item-viewport"
                               itemprop="contentUrl"
                               href="@file.GetUrl()"
                               data-type="@file.MediaType"
                               data-width="@file.Size.Width"
                               data-height="@file.Size.Height"
                               data-medium-image="@file.GetUrl(Model.ImageSize)"
                               title="@linkTitle"
                               data-picture-id="@file.Id">
                                @if (isVideo)
                                {
                                    <meta itemprop="thumbnailURL" content="@file.GetUrl(MediaSettings.ThumbnailSizeMd)" />
                                    <meta itemprop="embedURL" content="@file.GetUrl()" />
                                    <meta itemprop="name" content="@linkTitle" />
                                    <meta itemprop="uploadDate" content="@file.CreatedOn.ToString("u")" />
                                }
                                <media sm-file="file" sm-size="Model.ThumbSize" class="gal-item-content" alt="@picAlt" title="@picTitle" />
                            </a>
                        </div>
                    }
                </div>
            </div>
        </div>
    </div>

    <!-- Picture -->
    <div class="gal-cell">
        <div class="gal">
            @if (Model.Files.Count > 0)
            {
                for (int i = 0; i < Model.Files.Count; i++)
                {
                    var file = Model.Files[i];
                    var attrName = (i == Model.GalleryStartIndex ? "src" : "data-lazy");
                    var attrValue = file.GetUrl(Model.ImageSize);
                    var srcAttributes = new AttributeDictionary { [attrName] = attrValue };

                    <div class="gal-item">
                        <a class="gal-item-viewport" href="@file.GetUrl()"
                           data-thumb-image="@file.GetUrl(Model.ThumbSize)"
                           data-medium-image="@file.GetUrl(Model.ImageSize)"
                           data-picture-id="@file.Id">
                            @if (file.MediaType == MediaType.Image)
                            {
                                <img class="gal-item-content file-img"
                                     attrs="@srcAttributes"
                                     data-zoom="@file.GetUrl()"
                                     data-zoom-width="@file.Size.Width"
                                     data-zoom-height="@file.Size.Height"
                                     alt="@file.Alt"
                                     title="@file.TitleAttribute"
                                     itemprop="image" />
                            }
                            else
                            {
                                <figure class="file-figure gal-item-content">
                                    <picture class="file-thumb show fs-display-3" data-type="video" title="@file.TitleAttribute">
                                        <img class="file-img" attrs="@srcAttributes" alt="@file.Alt" />
                                    </picture>
                                </figure>
                            }
                        </a>
                    </div>
                }
            }
            else if (Model.FallbackUrl.HasValue())
            {
                <div class="gal-item">
                    <div class="gal-item-viewport no-picture" data-content="@T("Common.NoImageAvail")">
                        <img class="gal-item-content" src="@Model.FallbackUrl" alt="@Model.DefaultAlt" />
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<widget sm-if="Model.BoxEnabled" target-zone="aftercontent" key="pswp">
    <partial name="PhotoSwipe" />
</widget>
